<template>
  <div class="teach">
    <el-col :span="24">
      <div class="contener boderSet">
        <div class="crumbs">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-top: 10px"
          >
            <el-breadcrumb-item :to="{ path: '/' }"
              >申请管理</el-breadcrumb-item
            >

            <el-breadcrumb-item>易耗品领用申请</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="grid-content bg-purple-dark">
          <h3 style="margin-top: 30px">易耗品领用申请记录</h3>

          <div style="margin-top: 20px;overflow:hidden">
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="background-color: #343961"
              >发起领用申请</el-button
            >

            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              class="datas"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button
              type="primary"
              style="background-color: #343961"
              @click="Datequery()"
              slot="append"
              >查询</el-button
            >
            <el-dropdown style="float:right">
              <el-button type="primary" class="btntion" >
                导出excel<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>导出全部</el-dropdown-item>
                <el-dropdown-item>导出选中</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- </div> -->

          <!-- </el-col> -->

          <!-- <el-col :span="24">
               
                <div class="grid-content bg-purple-dark"> -->

          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%; margin-top: 30px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="申请时间"
              header-align="center"
              align="center"
              prop="applyTime"
            >
            </el-table-column>

            <el-table-column
              prop="cname"
              label="领用物品"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <!-- <el-table-column label="预计归还时间" width="300" prop="Returntime">
                            <template slot-scope="scope"></template>
                        </el-table-column> -->
            <!-- <el-table-column prop="state" label="审核状态" show-overflow-tooltip width="300" >
            </el-table-column> -->
            <el-table-column
              prop="state"
              label="审核状态  "
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <!-- <span>{{ scope.row.state | stateFilter }}</span> -->
                <el-tag type="success">{{
                  scope.row.state | stateFilter
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="Seedetails(scope.row.id)"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  data-id="row.id"
                  @click="Withdraw(scope.row.id)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            style="margin-left: 930px; margin-top: 10px"
          >
          </el-pagination>
        </div>
      </div>
    </el-col>

    <el-dialog
      title="申请详情"
      :visible.sync="dialogTableVisible"
      :width="'1300px'"
    >
      <div>2020-12-10</div>
      <el-table :data="tableDatas">
        <el-table-column
          property="className"
          label="分类"
          header-align="center"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          property="cname"
          label="名称"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          property="cnumber"
          label="编码"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          property="cprice"
          label="单价（元）"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          property="cnum"
          label="可用数量"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          property="cspecification"
          label="规格"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          property="storageSite"
          label="存放地点"
          header-align="center"
          align="center"
        ></el-table-column>

        <el-table-column
          property="cdepositTime"
          label="入库时间"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          property="creceiveNum"
          label="领用数量"
          header-align="center"
          align="center"
        ></el-table-column>
      </el-table>
      <div>
        <h3>备注:<span>2020-12-10</span></h3>
      </div>

      <el-steps
        :space="200"
        :active="1"
        finish-status="success"
        style="margin-top: 20px"
      >
        <el-step title="发起申请"></el-step>
        <el-step title="审核进中"></el-step>
        <el-step title="审核通过"></el-step>
      </el-steps>
    </el-dialog>
  </div>
</template>
  
<script>
import { mapActions, mapGetters } from "vuex";
import axios from "./../../utils/axios";
import application from "./../../serive/application";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 200,
      value1: "",
      input: "",
      dialogTableVisible: false,
      form: {
        cname: "",
        date1: "",
        applyTime: "",
        state: "",
        value1: "",
        delivery: false,
      },
      tableData: [],
      tableDatas: [
        // className:'',
        // facilityName:'',
        // facilityEncoding:'',
        // facilityPrice:'',
        // facilityAmount:'',
        // facilitySpecification:'',
        // storageSite:'',
        // facilityTime:'',
        // loseNum:'',
      ],
      multipleSelection: [],
    };
  },
  created() {
    this.Consumablesdisplay();
  },

  filters: {
    stateFilter(val) {
      if (val == 0) {
        return "已通过";
      } else if (val == 1) {
        return "未通过";
      } else if (val == 2) {
        return "审核中";
      } else {
        return "已撤回";
      }
    },
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    filterTag(value, row) {
      return row.state === value;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log("当前页码：", currentPage);
      if (this.value1 == "") {
        this.tableData = [];
        application
          .addConsumables(this.pageSize, this.currentPage)
          .then((res) => {
            console.log(res);
            this.tableData = [...res.data.data];

            console.log(this.tableData);
          });
      } else {
        this.tableData = [];
        application
          .addConsumables(this.pageSize, this.currentPage, {
            value1: this.value1,
          })
          .then((res) => {
            this.tableData = [...res.data.data];

            console.log(this.tableData);
          });
      }
    },
    //显示数据
    Consumablesdisplay() {
      application
        .addConsumables(this.pageSize, this.currentPage)
        .then((res) => {
          // console.log(res.data);
          this.tableData = [...res.data.data];

          console.log(this.tableData);

          // this.page=rse.data.page;
        });
    },
    //查询
    Datequery() {
      application
        .addConsumables(this.pageSize, this.currentPage, this.input)
        .then((res) => {
          this.input = cname;
          this.tableData = [...res.data.data];

          // console.log(this.tableData);
        });
    },
    //撤回申请

    Withdraw(id) {
      console.log(id);
      application.Withdrawapp(this.id).then((res) => {
        this.Consumablesdisplay();
      });
    },

    //查看详情
    //    async  detail(id){
    //        console.log(id);
    //       const {data:res}=await application.Seedetails(this.id,this.pageSize, this.currentPage,)
    //         this.tableDatas=[...res.data.data]
    //         console.log(this.tableDatas);

    //    }
    Seedetails(id) {
      application
        .Seedetailss(this.id, this.pageSize, this.currentPage)
        .then((res) => {
          this.tableDatas = [...res.data.data[id].applicantLookVos];

          this.dialogTableVisible = true;
          console.log(this.tableDatas);
        });
    },
  },
};
</script>
  
<style scoped>
.datas {
  margin-left: 10px;
}

.btntion {
  background-color: white;
  color: #343961;
}

.spantion {
  margin-left: 600px;
}

.spantion img {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: -10px;
}

.el-dropdown {
  margin-left: 10px;
}

.contener {
  margin: 20px 30px;
  padding: 30px;
}

.boderSet {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>